<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 订单核算 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="客户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="代理商" prop="agentid">
                        <el-select v-model="searchSet.agentid" class="formInput" placeholder="请选择代理商" clearable>
                            <el-option
                                v-for="item in agentList"
                                :key="item.id"
                                :label="`${item.name}(${item.contact})`"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="国家" prop="nationid">
                        <el-select v-model="searchSet.nationid" class="formInput" placeholder="请选择国家" clearable>
                            <el-option
                                v-for="item in nationList"
                                :key="item.id"
                                :label="`${item.name}(${item.code})`"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>

            <el-card class="SumCard" :body-style="{ padding: '10px 20px' }">
                <div class="FlexRowWarp">
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold">支出合计：</div>
                        <div v-for="(item, index) in sum.sumOutcome" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-money SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold; margin-left: 20px">收入合计：</div>
                        <div v-for="(item, index) in sum.sumIncome" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-wallet SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="FlexRowVCenter">
                        <div style="font-weight: bold; margin-left: 20px">利润合计：</div>
                        <div v-for="(item, index) in sum.sumProfit" :key="index" class="SumItem FlexRowVCenter">
                            <i class="el-icon-coin SumItemIcon"></i>
                            <div>
                                <div class="SumItemLabel">{{ item.currencyname }}</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="multipleTable"
                :row-class-name="TableRowClassName"
            >
                <!-- <el-table-column prop="id" label="单据ID" align="center"></el-table-column> -->
                <el-table-column prop="appusercode" label="用户代码" align="center"></el-table-column>
                <el-table-column prop="channelname" label="发货渠道" align="center"></el-table-column>
                <el-table-column prop="nationname" label="目的国家" align="center"></el-table-column>
                <el-table-column prop="agentname" label="代理商" align="center"></el-table-column>
                <el-table-column label="价格" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.useramount }}({{ scope.row.usercurrencyname }})</div>
                    </template>
                </el-table-column>
                <el-table-column prop="freightprice" label="到付价格(美元)" align="center"></el-table-column>
                <el-table-column label="代理商价格" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.agentamount }}({{ scope.row.agentcurrencyname }})</div>
                    </template>
                </el-table-column>
                <el-table-column label="利润" width="120" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.profit && scope.row.profit.length > 0">
                            <div v-for="(item, index) in scope.row.profit" :key="index" class="FlexRowLineVCenter">
                                <div>{{ item.currencyname }}：</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </template>
                        <div v-else>暂无利润</div>
                    </template>
                </el-table-column>
                <el-table-column prop="sendtime" label="发货时间" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import JSTool from '../../../utils/JSTool';
import MainTool from '../../../utils/MainTool';
import detailDialog from '../../common/dialog/detailDialog.vue';
import dataTable from './dataTable';
export default {
    name: 'packageInTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        let CheckDigit = (rule, value, callback) => {
            if (rule.required && StringTool.Empty(String(value))) {
                return callback(new Error('不能为空'));
            }
            if (!StringTool.DigitNumber(String(value))) {
                return callback(new Error('只能为整数或小数'));
            }
            if (Number(value) < 0) {
                return callback(new Error('只能为正数'));
            }
            callback();
        };
        return {
            searchSet: {
                usercode: '',
                agentid: '',
                nationid: '',
                startTime: '',
                endTime: ''
            },
            sum: {
                sumIncome: [],
                sumOutcome: [],
                sumProfit: []
            },
            orderStatusOption: {
                1: { label: '申请打包', value: '1' },
                2: { label: '发货待确认', value: '2' }
            },
            editVisible: false,
            selectRow: {},
            form: {
                id: 0,
                details: [],
                price: '',
                remark: '',
                mailcode: '',
                currencychangerateid: '',
                targetprice: ''
            },
            agentList: [],
            nationList: [],
            ExchangeRateId: '',
            ExchangeRate: 0
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    computed: {
        // 计算属性的 getter
        formDetailsSize: function () {
            // `this` 指向 vm 实例
            return this.form.details.length || 0;
        }
    },
    watch: {},
    methods: {
        //页面初始化
        init() {
            this.getData();
            API.StandardDoWith(API.Agent.Get({ status: 1 }), this, {
                success: (detail) => {
                    this.agentList = detail;
                }
            });
            API.StandardDoWith(API.Nation.Get({ status: 1 }), this, {
                success: (detail) => {
                    this.nationList = detail.list;
                }
            });
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.OrderProfit.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                    this.ExchangeRateId = detail.currencychangerateid;
                    this.ExchangeRate = Number(detail.currencychangerate);
                    this.sum.sumIncome = detail.sumIncome;
                    this.sum.sumOutcome = detail.sumOutcome;
                    this.sum.sumProfit = detail.sumProfit;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },
        TableRowClassName({ row, rowIndex }) {
            if (Number(row.orderstatus) == 2) {
                return 'success-row';
            } else if (Number(row.orderstatus) == 1) {
                return 'warning-row';
            }

            return '';
        },

        formatOrderStatus(row, column, cellValue, index) {
            return this.orderStatusOption[cellValue].label;
        },
        formatPackNumber(row, column, cellValue, index) {
            return cellValue ? cellValue.length : 0;
        },
        //刷新BOX
        RefreshValue() {
            let setAllSumPrice = 0;
            this.form.details.map((item) => {
                let vm = (Number(item.length) * Number(item.width) * Number(item.height)) / 5000;
                let setVolumeWeight = 0;
                let setVolumeWeightPrice = 0;
                let setSumPrice = 0;
                let overweightprice = 0;
                let overlengthprice = 0;
                let oversizeprice = 0;
                if (!Number.isNaN(vm) && !Number.isNaN(Number(item.weight))) {
                    setVolumeWeight = Math.max(vm, Number(item.weight));
                    if (!Number.isNaN(Number(this.selectRow.channelprice))) {
                        setVolumeWeightPrice = Number(this.selectRow.channelprice) * setVolumeWeight;
                    }
                }
                if (!Number.isNaN(Number(item.weight))) {
                    if (Number(item.weight) >= 22) {
                        overweightprice = 40 * item.weight;
                    }
                }
                if (!Number.isNaN(Number(item.length))) {
                    if (Number(item.length) >= 230) {
                        overlengthprice = 200;
                    } else if (Number(item.length) >= 110) {
                        overlengthprice = 40;
                    }
                    if (Number(item.width) >= 75) {
                        overlengthprice += 40;
                    }
                }
                if (!Number.isNaN(vm)) {
                    let size = Number(item.length) + (Number(item.width) + Number(item.height)) * 2;
                    if (size >= 310) {
                        oversizeprice = 200;
                    } else if (size >= 250) {
                        oversizeprice = 40;
                    }
                }
                let extraPrice =
                    Number(item.overlengthprice) +
                    Number(item.overweightprice) +
                    Number(item.oversizeprice) +
                    Number(item.paperprice) +
                    Number(item.boxprice) +
                    Number(item.bounceprice) +
                    Number(item.sueprice) +
                    Number(item.vacuumprice);
                if (!Number.isNaN(extraPrice)) {
                    setSumPrice = extraPrice + setVolumeWeightPrice;
                }
                item.volumeweight = setVolumeWeight.toFixed(2);
                item.volumeweightprice = setVolumeWeightPrice.toFixed(2);
                setAllSumPrice += setSumPrice;

                item.price = setSumPrice.toFixed(2);
                item.targetprice = (setSumPrice * this.ExchangeRate).toFixed(2);
                item.count = item.packages.length;
                item.overweightprice = overweightprice;
                item.overlengthprice = overlengthprice;
                item.oversizeprice = oversizeprice;
            });
            this.form.price = setAllSumPrice.toFixed(2);
            this.form.targetprice = (setAllSumPrice * this.ExchangeRate).toFixed(2);
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.OrderProfitExport(), '订单核算数据.xlsx');
                })
                .catch((err) => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.RowLineSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.RowLine {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.RowCell {
    flex: 1;
}
.ImageItem {
    height: 100px;
    width: 100px;
    border: 1px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
.TitleView {
    font-size: 17px;
    font-weight: bold;
}
.BoxView {
    padding: 5px;
    margin: 5px;
    border: 2px #e4e7ed solid;
    border-radius: 5px;
}
.BoxViewTitle {
    margin: 5px 5px;
    font-weight: bold;
    font-size: 15px;
}
.BoxSumView {
    padding: 5px;
    margin: 5px;
    border: 2px #e4e7ed solid;
    border-radius: 5px;
}
.TabLabel {
    height: 100%;
    width: 80px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.TabLabel div {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.TabLabelBadge {
    display: flex;
    justify-content: center;
    align-items: center;
}
.BoxInfoInput {
    width: 100px;
}
</style>
